フロントエンドエンジニアに向いている人・向いていない人を現役エンジニアが解説します！
最終更新日：
- フロントエンドエンジニアに興味があるけど、フロントエンドエンジニアに私は向いているのだろうか？
- どういう素質があればフロントエンドエンジニアになるべき？
- 逆にどういう素質がなければフロントエンドエンジニアになるべきではない？
DAI
今回は、このような疑問に対して現役エンジニアが答えを出します。
フロントエンドエンジニアは、Webサイトの表面的な部分の実装を行うエンジニアのことを意味します。 ウェブアプリケーションの構築には、サーバーサイド（バックエンド）とフロントエンドが存在し、そのフロントエンドを主導するエンジニアとなります。
この記事では、
- フロントエンドエンジニアに向いている人の特徴
- フロントエンドエンジニアに向いていない人の特徴
- そもそもフロントエンドエンジニアとは何か
などについて解説していきたいと思います。
DAI
フロントエンドエンジニアには、適性があります。これから目指す人は特に向いていない人についてはよく読んでみてください。
目次 (PRも含まれます）
フロントエンドエンジニアに向いている人の特徴
フロントエンドエンジニアに向いている人について、解説します。
知的好奇心が高い人（＝最新情報のキャッチアップができるから）
フロントエンドエンジニアを目指す人にとって「知的好奇心」が高いことは極めて重要であると断言できます。 フロントエンド（特にJavaScript）の技術的な進歩は非常に急速で、古い知識がすぐに陳腐化します。
例えば、JQueryは10年前から使われていたし、AngularJSなどのJavaScriptフレームワークも活用されていたのですが、新たな技術がどんどん増えていく中で、ユーザーが次第に減ってきています。
フロントエンドでは、古い技術だけを使用して生活するのはとても厳しいです。
そのため、新しい技術をしっかりと理解し、習得できるかどうかは、フロントエンドエンジニアを目指す人々にとっては極めて重要だと思います。
UI, UXに対してのこだわりがある人（＝使いやすいアプリを作れるため）
次に、作っているものの使いやすさへの高いこだわりや、UI UXに対するこだわりを持てる方は、フロントエンドエンジニアに合っていると思います。
これは例えばユーザーが使用した際に不都合を感じないか、デザインが一部だけ微妙にズレている、といったことに感じ取れるかが重要になります。
デザインが好きな人（＝コードxデザインが書けると強いため）
デザインに対する興味も重要です。
設計されたものの目的を明確に理解し、それを表現できるようなコーディングを行うことは、フロントエンドエンジニアにとって必要不可欠です。
フロントエンドエンジニアに向いていない人の特徴
逆に、フロントエンドエンジニアに適さない人について説明します。
知的好奇心が低い
知的好奇心があまり高くない場合、フロントエンドエンジニアに向かないかもしれません。
最新の技術をキャッチするのが難しく、古い知識だけで生きていくとすぐに古くなってしまうので、フロントエンドエンジニアとして生き残るのが難しいです。
使いやすさに対してこだわりがない
使い勝手にこだわりがない人は、フロントエンドエンジニアとしては適さないでしょう。
たとえば、より使いやすいインタラクションを設計することや、設計などまで興味を持てるとよいですが、ただHTMLやCSSが書ける程度では、AIの時代に将来的な競争力を持続するのは非常に難しいと考えます。
デザインのずれに気づけない方
次に、デザインマークアップの違和感がない人も難しいでしょう。
例えば、1ピクセルのずれが視認性を損なっていたり、デザインの基本原則に反していることに気づけない場合、自分で修正することはできません。
ユーザーに興味がない方
また、システムだけでなく、ユーザーや人間に対する興味がない方も、フロントエンドエンジニアには適さないでしょう。
コーディングは好きだけど、ユーザーや人間に対する興味がないと、結果を出すのがかなり難しくなります。
フロントエンドエンジニアリングでは、ユーザーの体験をきちんと定義しなければ、作ったものが利用されないこともありますので、その点できちんと実装できるようにする必要があります。
協調性がない人
協調性が欠けている人は、仕事の遂行が難しいかもしれません。
フロントエンドエンジニアの仕事は、デザイナーとデザインの調整や、バックエンドエンジニアと仕様の調整など、一人で完了することが少ないです。
勉強が苦手
フロントエンドエンジニアに限定せず、エンジニア全般にも言えますが、学ぶのが得意でない人には不向きです。エンジニアは、週末でも勉強を続けなければ厳しい職業です。
新しい情報を書籍やインターネットから日々取得し、それを実務に適用できる人がエンジニアに最適です。
フロントエンドとバックエンドとは？
フロントエンドとバックエンドはウェブアプリケーションやホームページ作成においてそれぞれが異なる役目を担っています。
それぞれをまずは理解していきましょう。
フロントエンドとは？
フロントエンドは、ユーザーが直接接する部分、つまりウェブサイトやアプリの見栄えやUIを担当します。 例えば、ログイン機能のIDやパスワードの入力画面を作成したり、入力制限を設定したりするのがフロントエンドの仕事です。
バックエンドとは？
一方、バックエンドはフロントエンドから送信されたデータをサーバーがキャッチし、データベースとの対話や外部サービスとの連動、複雑な算式の処理などを担当します。
DAI
つまり、フロントエンドはユーザーと直接コミュニケーションを取る部分で、バックエンドは裏側でのデータの処理や連携を行うということですね。
フロントエンドエンジニアの仕事内容
次に、フロントエンドエンジニアの役割について解説します。
フロントエンドエンジニアは、多様な職種を一つの表現で包括されています。
一般的に、ホームページ制作を担当するフロントエンドエンジニアは、コーダーとも称されます。Webアプリケーションの開発者は主にフロントエンドエンジニアとして言われることが多いです。
フロントエンドエンジニアの「コーダー」とは
コーダーの主要な仕事は、デザインが提出された企業のホームページやランディングページにHTML、CSS、jQueryを使用してコーディングを実施することです。
コーダーは、WordPressやランディングページのマークアップ（コーディング）を基本的に行います。
デザイナーから渡されたデザインファイル（ウェブページのデザインが集約されたファイル）を踏まえて、デザインに従ったHTMLやCSSのコーディングが主な仕事内容となります。
ウェブアプリケーション開発のフロントエンドエンジニアの仕事内容
もうひとつが、Webアプリケーションを作り上げるフロントエンドエンジニアです。
フロントエンドエンジニアとしてウェブアプリケーションを開発する職務は、コーダーとは微妙に違います。
基本的に、彼らが造るのはウェブアプリケーションです。
Webアプリケーションとは例えば、
- ログイン機能
- 決済機能
- フォロー機能
そのようなものをウェブアプリケーションという呼び名を使います。
ウェブアプリケーションのケースでは、バックエンドのロジックが複雑な事例が多く、大量のビッグデータを集計し、その内容をフロントエンドを通じて取得するという処理を行うことがあります。
近年、Webアプリケーション開発でフロントエンドエンジニアがデザインとマークアップを同時に担当する体制が、特にウェブアプリ開発の界隈で増えています。その時、ワイヤーフレームの作成や、Figmaによるデザインコンポーネントの作成、Adobe XDを利用したワイヤーとデザインの作成などの技術が求められることがあります。コーダーとウェブアプリ開発のフロントエンドエンジニアの職務は大きく異なるので、その点を把握しておくことが重要です。
フロントエンドエンジニアに必要なスキルや知識
次に、フロントエンド開発の詳細を解説します。フロントエンドエンジニアにはウェブ制作系とウェブアプリケーション開発系の二つのキャリアがあり、それぞれが異なるスキルセットを必要とします。
ウェブ制作会社で働くコーダー的フロントエンドエンジニアのスキルセット
ウェブ制作会社で働くコーダーは、UI開発においてHTML、CSS、JavaScriptといった言語の理解が必須です。さらに、ウェブアプリ開発のフロントエンドエンジニアとは異なり、jQueryについての知識が求められることもあります。 jQueryはJavaScriptのフレームワークで、その新規開発は既に終了しています。そのため、もう古いと思われるかもしれませんが、ウェブ制作においてはまだ現役で使われているので、習得しておくとよいでしょう。
また、Web制作の会社では、デザインとマークアップを同時に担当することも珍しくありません。その際、Photoshopやイラストレーターなど、デザインツールの操作スキルが必須となります。
また、Adobe XDやFigmaといったツールを利用してワイヤーフレームを制作するスキルも求められます。基本的に、HTML、CSS、JavaScript、JQueryの知識は必要とされます。
さらに、ウェブサイトやランディングページの制作では、SEO対策の理解が必要となります。また、WordPress等のCMS開発のスキルも必要となることがあり、サーバーサイドではPHPの習熟が必要となることもあります。
ウェブアプリケーション開発のフロントエンドエンジニアの必要スキル
フロントエンドエンジニアとしてウェブアプリケーション開発を行うには、コーダーと同じくHTML、CSS、JavaScriptの基本的な知識が求められます。さらに、ReactやVueなどのJavaScriptのウェブフレームワークの使い方も必要とされます。これらのフレームワークは、日本のウェブアプリケーション開発の現場でよく使われており、JavaScriptのフレームワークの学習は避けて通れません。
さらに、バックエンドと通信するためのREST APIやGraphQLの知識、実装スキルが必要です。ウェブアプリケーション開発においては、クラウドインフラの知識も重要な要素となることがあります。Heroku、AWS、GCPなどのPaaSを用いたサービスのデプロイ実績やLinuxコマンドの知識も必要とされます。
未経験からフロントエンドエンジニアになるには？
次に、フロントエンドエンジニアに未経験から進出するためには何が必要かを解説します。まず、エンジニアに未経験から転職を考える方は、自分で学習し、アプリケーションもしくはホームページを作成できるレベルになることが必要です。それを目指して学習を進めていくと良いでしょう。
フロントエンドエンジニアが学習すべきプログラミングの基礎
まず、プログラミングの基本を習得することが大切です。具体的に学ぶべき項目は以下の通りです。
- HTML
- CSS
- JavaScript
- jQuery(コーダーを目指す場合)
- Reactもしくは Vue(Webアプリケーション開発のフロントエンドエンジニアを目指す場合)
- Linuxコマンド
コーダーを目指す上で、ウェブサーバーを借り、静的ファイルをアップロードし、ウェブページを公開する経験が必要です。 ウェブのフロントエンドエンジニアであるなら、ウェブアプリケーションをPaaSを通じてデプロイする経験が必要となります。
余裕があればプログラミングスクールへか通う
プログラミングの基礎を身につけたら、次には就職に必要な知識を深く学ぶことが良いと思います。
その場合、プログラミングスクールへの参加が一つの選択肢になり得ます。
プログラミングスクールに通う前に、まず基礎知識を学ぶことが重要です。 なぜかというと、プログラミングスクールに入ると失敗する可能性が高いからです。自分で独学で試してみて、それがダメだったら、その後にプログラミングスクールに参加してさらにスキルを伸ばすのが良いと思います。 私が個人的に推奨するのは、RUNTEQというプログラミングスクールです。ここではバックエンドエンジニアとフロントエンドエンジニアの知識を両方学べます。 フロントエンドエンジニアとしての未経験よりも、バックエンドの知識を備えた上でフロントエンドができる人は、個人的には採用しやすいと思います。
オリジナルアプリ・ホームページの作成
次に、自分だけのアプリ、ウェブサイトを作成しましょう。
コーダーとして、自分だけのウェブサイトを作ることを推奨します。お名前.comやXServerなどのサーバー業者からドメインとサーバーを借り、そのサーバーにファイルをアップロードし、全世界に公開することで、誰でも閲覧できるポートフォリオを作成してみるとよいでしょう。
ウェブアプリケーションエンジニアであるなら、Heroku等のPaaSサービスをデプロイしてみましょう。
ポートフォリオの作成
次に、ポートフォリオの準備です。ポートフォリオは、就職活動で必要となる履歴書や職務経歴書のようなものです。ポートフォリオの作成方法については、関連記事をご確認ください。
